<template>
    <div class="right-menu-item">
        <!-- This is a basic Vue component template -->
        <i class="el-icon-bell" @click="drawer = true" style="cursor:pointer"
            :class="{ 'shake el-icon-message-solid': isWarning }"></i>

        <el-drawer append-to-body title="告警提醒" :visible.sync="drawer" direction="rtl" :before-close="handleClose">
            <div style="padding:0 32px">
                <ul>
                    <li v-for="(item, index) in noticeList" :key="index">
                        <div class="notice" @click="navToPage(item)">
                            <div class="title">
                                <p>{{ item.noticeTitle || '#' }}</p>
                                <p>{{ item.noticeContent || '#' }}</p>
                            </div>
                            <div class="footer">
                                <p>{{ item.noticeType == 1 ? '设备已掉线' : 'sim卡到期预警' || '#' }}</p>
                                <p v-if="item.noticeType == 1" style="color: #999;font-size:14px">最近一次通信时间: {{ parseTime(item.createTime,'{y}-{m}-{d} {h}:{i}:{s}')  }}</p>
                                <p v-else style="color: #999;font-size:14px">{{ item.createTime }}</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { warningNotice } from '@/api/system/notice'
export default {
    name: 'NotifyComponent',

    components: {
    },
    data() {
        return {
            isWarning: false,
            drawer: false,
            noticeList: []
        }
    },
    mounted() {
        this.getNotice()
        setInterval(() => {
            this.getNotice()
        }, 10000);
    },
    methods: {
        navToPage(item) {
            if (item.noticeType == 1) { // 设备
                this.$router.push({ path: '/index_new' })
            } else { // sim卡
                this.$router.push({ path: '/IOT_card/zk_sim_card_info' });
            }
            this.drawer = false;
        },
        handleClose(done) {
            this.drawer = false;
        },
        getNotice() {
            warningNotice().then(res => {
                this.noticeList = res.data
                this.isWarning = res.data.length > 0 // 当有告警时，显示图标并进行闪烁动画
            })
        }
    }
};
</script>

<style lang="scss" scoped>
ul {
    list-style: none;
    padding-left: 0;

    li {
        margin-bottom: 12px;

        .notice {
            cursor: pointer;
            background: #fff;
            box-shadow: 0 2px 10px 0 rgba(218, 5, 5, 0.5);
            border-radius: 6px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            p {
                margin-top: 0;
            }

            p:last-child {
                margin-bottom: 0;
            }

            .footer {
                text-align: right;
            }
        }
    }

}

.el-icon-bell {
    font-weight: bold;
    font-size: 20px;
    line-height: 50px;
}

@keyframes shake {
    0% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(-10deg);

    }

    50% {
        transform: rotate(10deg);
    }

    75% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(0);
    }
}

.shake {
    animation: shake 0.5s infinite;
    color: red;
}
</style>
